<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar title="点评详情"></navbar>
		<view class="form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="form-title">
				您的申请正在受理中......
			</view>
			<uni-forms :modelValue="formData" label-position="top" :rules="rules">
				<uni-forms-item label="就职公司" name="acTitle">
					<uni-easyinput type="text" v-model="formData.acTitle" class="shadow"
						placeholder="请填写就职公司" disabled />
				</uni-forms-item>
				<uni-forms-item label="岗位类别" name="hangye">
					<uni-easyinput type="text" v-model="formData.hangye" class="shadow"
						placeholder="请填写岗位类别" disabled />
				</uni-forms-item>
				<uni-forms-item label="任职岗位" name="gangwei">
					<uni-easyinput type="text" v-model="formData.gangwei" class="shadow"
						placeholder="请填写任职岗位" disabled />
				</uni-forms-item>
				<uni-forms-item label="任职时间" name="name">
					<view class="form-line">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.startTime"
							class="shadow" disabled @maskClick="maskClick" placeholder="请选择开始日期" />
						<text>至</text>
						<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.endTime"
							class="shadow" disabled @maskClick="maskClick" placeholder="请选择结业日期" />
					</view>
				</uni-forms-item>
			</uni-forms>
		 
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {remarkDetail} from "@/core/web-api/qiuzhiduan.js"
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				formData: {
					acId: "", // 	企业id
					endTime: "", // 截止时间	
					gangwei: "",
					hangye: "",
					startTime: "", //开始时间
				},
				bottomBtnHeight: uni.upx2px(140),
				id:"",
			}
		},
		methods: {
			/**
			 * 重新提交
			 */
			toForm(){
				uni.navigateTo({
					url:"/pages/ucenter/qiuzhiduan/remark/apply?id=" + this.formData.id
				})
			},
			cityClick() {
				this.$refs.cityRefs.show();
			},
			
			/**
			 * 查看详情
			 */
			getDetail(){
				remarkDetail({id:this.id}).then(res=>{
					if(res.code==20000){
						const {detail} = res.data;
						detail.startTime = detail.startTime? detail.startTime.split(" ")[0]:""
						detail.endTime = detail.endTime? detail.endTime.split(" ")[0]:""
						this.formData = detail;
					}
				})
			},
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail();
		}
	}
</script>

<style scoped lang="less">
	.br {
		margin-bottom: 20upx;
	}

	.main {
		width: 100%;
		padding: 0 65upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			z-index: 10;
			padding:0 70upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 10upx;
			
			view{
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				border-radius: 10upx;
				font-size: 30upx;
			}

			&-submit {
				width: 569upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				margin-left: 15upx;
			}
			
			&-save{
				width: 128upx;
				background-color: #fff;
				border:1upx solid #ccc;
				box-sizing: border-box;
				color: #666666;
			}
		}
	}

	.form {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		&-title{
			font-size: 28upx;
			color: #708aff;
			font-weight: bold;
			text-align: center;
			padding:30upx 0;
		}

		&-line {
			display: flex;
			align-items: center;
			flex:1;
			&-select{
				width: 170upx;
				margin-left: 20upx;
			}
			text{
				margin:0 20upx;
				font-size: 26upx;
				color: #666;
			}
		}
		
		&-button{
			width: 278upx;
			height: 61upx;
			border-radius: 20upx;
			background-color: #708aff;
			text-align: center;
			line-height: 61upx;
			font-size: 28upx;
			color: #fff;
			margin-top: 230upx;
		}
		
		&-tip{
			font-size: 30upx;
			color: #000;
			width: 100%;
			text-align: center;
		}
		
		/deep/ .uni-forms{
			width: 100%;
		}

		/deep/ .uni-easyinput__content:not(.is-textarea) {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
		}

		/deep/ .uni-easyinput {
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-select {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-forms-item__label {
			padding-bottom: 25upx;
			text {
				font-size: 30upx;
				color: #000;
			}
			

		}
		
		/deep/ .uni-easyinput__content.is-disabled {
			color: #333;
		}

		/deep/ .uni-date__x-input {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			margin-left: 10upx;
			font-size: 24upx;
			color: #666666;
		}
		/deep/ .input-value{
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
		}
		/deep/ .checklist-box{
			&:last-child{
				margin-right: 0;
			}
		}
	}
</style>